I built this entire website with the following tags
div
a href
h1-h6
br
p
The following attributes
id=""
style=""
Some CSS formatting <-- this is what this page is missing
Flex box. Display: flex
Grid. Display: Grid
list all CSS attributes
The following tools
VS code
Git Bash
And the following web hosting, I would say this is the hardest part to learn all the pieces
Godaddy
Github
Azure $web container
My voyage of learning to program
In 1986 I learnd Basic programing language on an AppleII but did not continue that education beyond that. In 2003 I wrote a very simple website using simple html with notepad as my editor. So when I decided to try programing in 2021 I was wondering where I should start. I decided to write a single small html page using notepad then focuse on what tools I should use to edit and post that to the web. I did not want to use a website creator, I had done that in 2010 and now the site is not editable unless I want to learn their tool again since they change it every coulple years. I did not want to use a technology that would change constantly. I talked to my brother and he gave me this list of tools to learn.
VScode for file creation and editing
bash terminal
git and github for code management
Azure static website for hosting my page
godaddy for buying my domain and dealing with DNS
not compatible
linking to a specific spot on a page. make a div with an ID that is unique. Use # in the anchor link to link to that div.
< a href="../AskaTaylor/index.html#alex">alex</a> 6/21/2024
this is how you write code snipets
The tried and true method for HTML:
Replace the & character with &
Replace the gitcharacter with <
Replace the > character with >
Optionally surround your HTML sample with <pre> and/or <code> tags. But I dont like doing this because auto formating gets screwedup. 6/21/2024
I decided to name my divs with the color they are in css so divlgreen, divlblue etc... Instead of Div1, Div2. 6/15/2024
show every step you took to make your website but start with a 4 line html document made with note pad. then show a hyperlink and explaine documents no longer need to be linier. then talk about editors. indenting multiple lines color coding script autocompleation ect. then go through how you built your site one page and one command at a time. If you make a video inclued new tags in the description.
5/2024 flex and grid divs
6/22/2024 when you open VS code and do a git pull request you need to make sure there are no files open in the editor. what is open and in the editor will be what was old not what was retrieved with the pull request.
When you do a Sync Changes in VS Code it also does a git pull and pulls down any changes from github.
6/26/2024 I thought I understood how my navigation buttons got their properties but then when I went to change their size an color nothing changed. First I learned what order things took priority in the style.css page, then I learned what sub things you could do like #nav:hover and .divactive> div{color: white}
the problem was I didn't know the full syntax and thought This
.nav > div {
background-color: blue;
margin: 0.5%;
padding: 1%;
text-align: center;
line-height: 20px;
font-size: 1em;}
a {color: white;}
was setting div inside class nav and anchor inside class nav but it only sets div and the a was setting anchor for all anchors. but I was still wrong this did set both, now I am confused.
I just learned another thing
p.nav {color: blue} only sets the color blue for paragraphs with class nav
and you can have 2 clsses on an element class= "nav fontblack"
I have learned that getting the navigation right is a lot of cutting and pasting. You figure out one thing you like then cut and paste that into 30 documents. Then you figure out another thing you like, cut and paste that into 30 documents. Repeate that 40 times and you will be getting close on your navigation :)